<template>
    <main class="page-bg" id="canvasDom">
        <n-breadcrumb class="head-breadcrumb">
            <n-breadcrumb-item>产品管理</n-breadcrumb-item>
            <n-breadcrumb-item>产品列表</n-breadcrumb-item>
        </n-breadcrumb>
        <header class="flex-between">
            <section class="head-right" data-html2canvas-ignore="true">
                <ScreenshotKit :downloadName="'产品数据管理'" />
            </section>
        </header>
        <header class="head-operation">
            <n-flex justify="space-between">
                <n-button color="#2e88cf">
                    <template #icon>
                        <n-icon size="20" :color="'#fefefe'"><Search /></n-icon>
                    </template>
                    检索
                </n-button>
                <section class="btns-group flex-end">
                    <n-button color="#2e88cf" class="mr10">
                        <template #icon>
                            <n-icon size="20" :color="'#fefefe'"><Add /></n-icon>
                        </template>
                        新增
                    </n-button>
                    <n-button color="#2e88cf" class="mr10">
                        <template #icon>
                            <n-icon size="20" :color="'#fefefe'"><CloudDownloadOutline /></n-icon>
                        </template>
                        导出
                    </n-button>
                    <n-button color="#2e88cf" class="mr10">
                        <template #icon>
                            <n-icon size="20" :color="'#fefefe'"><CloudUploadOutline /></n-icon>
                        </template>
                        上传
                    </n-button>
                    <n-button color="#2e88cf">
                        <template #icon>
                            <n-icon size="20" :color="'#fefefe'"><TrashBinOutline /></n-icon>
                        </template>
                        批量删除
                    </n-button>
                </section>
            </n-flex>
        </header>
        <section class="table-main">
            <n-data-table 
            size="small"
            :columns="columns" 
            :data="data" 
            :bordered="false"
            :bottom-bordered="false"
            :style="{ height: `84vh` }"
            flex-height
            :scroll-x="1800"
            :row-key="rowKey"
            @update:checked-row-keys="handleCheck"
        />
        </section>
        <section class="pagination-box flex-center">
            <n-pagination v-model:page="page" 
            v-model:page-size="pageSize"
            :page-count="pageTotal"
            :page-sizes="pageSizes"
            show-size-picker>
                <template #prev>上一页</template>
                <template #next>下一页</template>
            </n-pagination>
        </section>
    </main>
</template>

<script setup lang="ts">
import { ref, reactive,h } from 'vue'
import { Search, Add, CloudUploadOutline, CloudDownloadOutline,TrashBinOutline,Calendar } from '@vicons/ionicons5'
import { NTag,NIcon, NButton, useMessage, NImage,NText } from 'naive-ui'
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
   
type RowData = {
    produceId: string,
    produceName: string,
    produceImg: string,
    produceType: array,
    produceSize: array,
    producePrice: string,
    produceSort: string,
    produceColor: string,
    produceNum: number,
    produceBirth: string,
    produceState: string
}
let page = ref(1)
let pageSize = ref(20)
let pageTotal = ref(100)
const pageSizes = [
    { label: '10 每页', value: 10 },
    { label: '20 每页', value: 20 },
    { label: '50 每页', value: 50 },
    { label: '100 每页', value: 100 }
]
let data = reactive(<Array<object>>[])
let columns = reactive(<TableColumn<RowData>>[]) 
let height = ref(300)
const checkedRowKeys = ref([])
const rowKey = (row: RowData) => row.address
const createColumns = ():DataTableColumns<RowData> => {
  return [
    { type: 'selection',fixed: 'left' },
    { title: '商品名称', key: 'produceName', fixed: 'left' },
    { title: '商品图片', key: 'produceImg', 
        render (row) {
            return h(
                NImage,
                {
                    src: row.produceImg,
                    width: 60,
                    height: 40
                },
                {
                default: () => row.produceName
                }
            )
        }
    },
    { title: '商品类型', key: 'produceType', width: 180, 
        render (row) {
            const tags = row.produceType.map((tagKey) => {
            return h(
                NTag,
                {
                style: {
                    marginRight: '6px'
                },
                type: 'info',
                bordered: false
                },
                {
                default: () => tagKey
                }
            )
            })
            return tags
        }
    },
    { title: '商品规格', key: 'produceSize', width: 150, 
        render (row) {
            const tags = row.produceSize.map((tagKey) => {
            return h(
                NTag,
                {
                style: {
                    marginRight: '6px'
                },
                type: 'info',
                bordered: false
                },
                {
                default: () => tagKey
                }
            )
            })
            return tags
        }
    },
    { title: '商品价格', key: 'producePrice', width: 180,
        render (row) {
            const tags = row.producePrice.split('-').map((tagKey) => {
            return h(
                NTag,
                {
                style: {
                    marginRight: '6px'
                },
                type: 'info',
                bordered: false
                },
                {
                default: () => '￥'+ tagKey
                }
            )
            })
            return tags
        }
    },
    { title: '商品分类', key: 'produceSort', },
    { title: '商品颜色', key: 'produceColor',},
    { title: '商品数量', key: 'produceNum',  },
    { title: '生产日期', key: 'produceBirth', width: 200,
        render (row) {
            return [h(
                NIcon,
                {
                    size: 20,
                    color: '#666666',
                    style: {
                        verticalAlign: 'bottom',
                        marginRight: '4px'
                    }
                },
                {
                    default: () => h(Calendar)
                }
            ), h('span', row.produceBirth)] // h('span', ['多个','数组','划分'])
        }
    },
    { title: '商品状态', key: 'produceStateText',},
    { title: '操作', key: 'actions', align: 'center', fixed: 'right',width: 240,
      render (row) {
        
        return [
            h(
            NButton,
            {
                size: 'small',
                color: '#2e88cf',
                textColor: '#ffffff',
                style: { marginRight: '8px' },
                onClick: () => {}
            },
            { default: () => '详情' }
            ),
            h(
            NButton,
            {
                size: 'small',
                color: '#2e88cf',
                textColor: '#ffffff',
                style: { marginRight: '8px' },
                onClick: () => {}
            },
            { default: () => '修改' }
            ),
            h(
            NButton,
            {
                size: 'small',
                color: '#ff0000',
                textColor: '#ffffff',
                onClick: () => {}
            },
            { default: () => '删除' }
            )
        ]
      }
    }
  ]
}

const handleCheck = (rowKeys: DataTableRowKey[]) => {
    checkedRowKeys.value = rowKeys
}
const init = () => {
    columns = createColumns()
    for (let index = 0; index < pageTotal.value; index++) {
        let obj = {
            produceId: '0000'+index,
            produceName: "星星小发夹"+index,
            produceImg: "https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg",
            produceType: ['布艺', '塑料', '普通'],
            produceSize: ['大', '中', '小'],
            producePrice: '50-30-10',
            produceSort: '饰品',
            produceColor: '红色',
            produceNum: 100,
            produceBirth: '2024-7-4',
            produceState: index%2===0? '1': '0',
            produceStateText: index%2===0? '可售': '已售'
        }
        data.push(obj)
    }
}
init()
</script>

<style scoped>
.page-bg {
    width: 100%;
    min-height: 100vh;
    /* background-color: #383f49; */
    color: #fff;
}
.head-breadcrumb {
   padding: 4px 10px;
   background-color: #eeeeee;
}
.head-operation {
    width: 100%;
    padding: 10px 16px;
    border-bottom: 1px solid #eeeeee;
}
.table-main {
    margin: 10px 16px;
}
.pagination-box {
    margin: 10px 16px;
    height: 40px;
}
.mr10 {
    margin-right: 10px; 
}
</style>
  